<template>
  <div class="col main-content mt-15" v-if="data.content!=null">

      <el-card style="width: 100%">
        <div slot="header" class="clearfix">
          <h4>{{data.name}}</h4>
        </div>
        <codemirror v-model="data.content" :options="cmOption"></codemirror>
        <div class="row">
          <div class="col">
            <div class="col tool-bar">
              <el-button type="primary" @click="save"><i class="fa fa-save"></i> 保存</el-button>
              <el-button type="success" @click="back"><i class="fa fa-sign-out"></i> 返回</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
</template>
<style>

</style>
<script>
  import AdminService from 'src/service/admin'
  import {codemirror} from 'vue-codemirror'
  // require styles
  import 'codemirror/lib/codemirror.css'

  import 'codemirror/mode/xml/xml.js'
  import 'codemirror/mode/javascript/javascript.js'
  import 'codemirror/mode/css/css.js'
  import 'codemirror/mode/vbscript/vbscript.js'
  // theme css
  import 'codemirror/theme/dracula.css'
  // require active-line.js
  import 'codemirror/addon/selection/active-line.js'
  // autoCloseTags
  import 'codemirror/addon/edit/closetag.js'
  import 'codemirror/addon/selection/selection-pointer.js'
  import 'codemirror/mode/htmlmixed/htmlmixed.js'

  export default {
    name: 'AdminMailTemplateEdit',
    components: {codemirror},
    data() {
      return {
        data: {},
        cmOption: {
          tabSize: 4,
          styleActiveLine: true,
          lineNumbers: true,
          autoCloseTags: true,
          line: true,
          smartIndent: true,  // 是否智能缩进
          mode: {
            htmlMode: true,
            name: 'htmlmixed',
            scriptTypes: [{
              matches: /\/x-handlebars-template|\/x-mustache/i,
              mode: null
            },
              {
                matches: /(text|application)\/(x-)?vb(a|script)/i,
                mode: 'vbscript'
              }]
          },
          theme: 'dracula'
        }
      }
    },
    methods: {
      getData: function (id) {
        const me = this
        AdminService.mailTemplate(id).then(function (data) {
          if (data != null) {
            me.data = data.datas[0]
          }
        })
      },
      save: function () {
        const me = this;
        AdminService.saveMailTemplate({
          id: me.data.id,
          content: me.data.content
        }).then(ds => {
          if (ds != null) {
            me.$message.success("保存内容成功.")
          }
        })
      },
      back: function () {
        this.$router.go(-1)
      }
    },
    beforeMount: function () {
      const id = this.$route.params['id']
      if (id != null) {
        this.getData(id)
      }
    }
  }
</script>
